/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018/11/24 Time: 14:01
 */

import {StyleSheet} from 'react-native';
import {
    COLOR_GRAY_BACKGROUND,
    COLOR_GRAY_LINE,
    COLOR_WHITE,
    FONT_COLOR_SUB_TITLE,
    FONT_COLOR_TITLE, FONT_SIZE_14,
    FONT_SIZE_SUB_TITLE,
    FONT_SIZE_TITLE
} from "../../../constant/PHColors"
import {SCREEN_WIDTH} from "../../../constant/PHScreen";

export const styles = StyleSheet.create({

    container: {
        flex: 1,
        // width:SCREEN_WIDTH,
        backgroundColor: '#ffffff'
    },

    scrollView: {
        flex: 1,
        backgroundColor: '#ffffff',
    },

    phoneContainer :{
        borderColor:"rgb(241,241,241)",
        backgroundColor:"rgb(255,255,255)",
        flex:1,
        borderStyle:"solid",
        borderWidth:1,
        margin:10,
        borderRadius:3,
        shadowColor: "rgb(229,229,229)",
        shadowOpacity: 0.5,
        shadowRadius: 2,
        shadowOffset: {
            height: 3,
            width: 3
        }
    },

    headerContainer: {
        width:SCREEN_WIDTH,
        height: 40,
        backgroundColor: COLOR_GRAY_BACKGROUND,
        flexDirection:'row',
    },

    headerLeft:{
        width:80,
        justifyContent: 'center',
        alignItems: 'center',
    },

    headerCenter:{
        width:SCREEN_WIDTH-190,
        justifyContent: 'center',
        alignItems: 'center',
    },

    progressBar:{
        height:10,
        width:SCREEN_WIDTH-210,
        backgroundColor:'#e9e9e9',
        borderRadius:50,
        flexDirection:'row',
        overflow: 'hidden',
    },

    progressBarDone:{
        height:10,
        backgroundColor:'#59a84b',
    },

    headerRight:{
        width:110,
        justifyContent: 'center',
        alignItems: 'center',
    },


    headerText: {
        fontSize: 16,
        color: FONT_COLOR_TITLE,
    },

    headerLeftText: {
        fontSize: 15,
        color: FONT_COLOR_SUB_TITLE,
        marginLeft: 15
    },

    headerLeftTextHard:{
        fontSize: 17,
        color: '#333333',
        marginLeft: 10
    },

    headerRightText: {
        fontSize: 16,
        color: FONT_COLOR_SUB_TITLE,
        marginRight: 15
    },

    headerRightTextHard: {
        fontSize: 17,
        color: '#333333',
        marginRight: 10
    },

    cellView: {
        height:'auto',
        width:SCREEN_WIDTH,
        flexDirection: 'column',
    },

    cellViewTitle:{
        height:45,
        backgroundColor:'#fff',
        flexDirection: 'row',
        borderBottomWidth: 1,
        borderBottomColor: COLOR_GRAY_LINE,
    },

    cellViewBody:{
        height:'auto',
        backgroundColor:'#fff',
        flexDirection: 'row',
        flexWrap:'wrap',
        justifyContent:'flex-start',
    },

    cellLeftView: {
        width: SCREEN_WIDTH/2,
        justifyContent: 'center',
        alignItems: 'flex-start',
    },

    cellRightView: {
        width: SCREEN_WIDTH/2,
        justifyContent: 'center',
        alignItems: 'flex-end',
        marginRight: 10,
    },

    cellRightTopView: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'flex-start'
    },

    cellRightBottomView: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'flex-start'
    },

    cellRightTopText: {
        marginLeft: 5,
        marginBottom: 4,
        fontSize: FONT_SIZE_TITLE,
        color: FONT_COLOR_TITLE
    },

    cellRightBottomText: {
        marginLeft: 5,
        marginTop: 4,
        fontSize: FONT_SIZE_SUB_TITLE,
        color: FONT_COLOR_SUB_TITLE
    },

    cellLeftImage: {
        width: 50,
        height: 50,
        marginLeft: 15
    },

    roomBox:{
        width: SCREEN_WIDTH*0.44,
        height:50,
        marginLeft:SCREEN_WIDTH*0.04,
        marginTop:7,
        marginBottom:7,
        borderColor:'#dae1e2',
        borderWidth: 1,

    },

    roomBoxTouch:{
        width: SCREEN_WIDTH*0.44,
        height:48,
        flexDirection: 'row',
    },

    roomBoxLeft:{
        flex:0.35,
        height:48,
        justifyContent: 'center',
        alignItems: 'center',
    },

    roomBoxRight:{
        flex:0.64,
        height:48,
        borderLeftColor:'#dae1e2',
        borderLeftWidth: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },

    roomBoxLeftText:{
        fontSize: 17,
        color: FONT_COLOR_TITLE,
    },

    roomBoxRightText:{
        fontSize: 20,
        color: FONT_COLOR_TITLE,
    },

    cellFloorView:{
        height: 40,
        flexDirection: 'row',
        borderColor: '#ffffff',
        borderTopWidth: 5,
        borderBottomWidth: 5,
        backgroundColor:'#E5ECED',
        width:SCREEN_WIDTH-10,
    },

    cellFloorText:{
        flex: 1,
        marginLeft: 5,
        marginTop: 5,
        fontSize: FONT_SIZE_TITLE,
        color: FONT_COLOR_SUB_TITLE
    },

    cellViewRoomBox: {
        height: 60,
        flexDirection: 'row',
        borderColor: '#ffffff',
        borderWidth: 3,
        backgroundColor:'rgb(165, 202, 159)',
        width:(SCREEN_WIDTH-10)/3,
    },

    cellRoomDiskView: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
    },

    cellLeftViewRoomBox: {
        flex:0.5,
    },

    cellLeftTopView: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'flex-start',
        position:'absolute',
    },

    cellLeftTopText: {
        marginLeft: 5,
        fontSize: 18,
        color: FONT_COLOR_TITLE
    },

    cellLeftMidView:{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'flex-start',
        position:'absolute',
        top:25,
        // backgroundColor:'pink'
    },

    cellLeftMidText: {
        marginLeft: 5,
        fontSize: 13,
        color: '#5f5f5f'
    },

    cellRightViewRoomBox: {
        flex:0.5,
    },

    cellRightIconView:{
        top:1,
        right:1,
        position:'absolute',
    },

    cellBottomView: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        position:'absolute',
        bottom:0,
    },

    roomDiskBox:{
        flexWrap: 'wrap',
        flexDirection: 'row',
        justifyContent: 'flex-start',
        borderLeftWidth: 5,
        borderRightWidth: 5,
        borderColor: '#ffffff',
    },

    windowCenter:{
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
})